<template>
	<view class="content" :style="{height:height+1+'px'}">
		<view class="title">
			精选活动
			<image class="img" v-for="item in list" @click="goActivityWeb(item)" :style="{height:width+'px'}"
				   :src="item.cover"></image>
			<button :loading="loading==1" size="mini" class="load-but" @click="clikeGetData()">
				{{loading==-1?'':loading==1?'正在加载更多':loading==-2?'加载失败,点击重试..':''}}
			</button>
		</view>
	</view>
</template>

<script>
	// promotionList
	import API from '../../common/api.js';
	export default {
		data() {
			return {
				width:uni.getSystemInfoSync().screenWidth*0.364,
				height: uni.getSystemInfoSync().windowHeight,
				list:[],
				loading:0

			}
		},
		onLoad() {
			this.getData(true)
		},
		onPullDownRefresh(){
			this.getData(true)
		},
		onReachBottom(){
			if([-1,-2].indexOf(this.loading)<0){
				this.getData()
			}
		},
		methods: {
			goActivityWeb(activityData){
				uni.setStorage({
					key: 'activityData',
					data: JSON.stringify(activityData),
					success: function () {
						uni.navigateTo({
							url: '../subscribe/activityDetails?type=1'
						});
					}
				});
			},
			clikeGetData(){
				if(this.loading==-2){
					this.getData()
				}
			},
			async getData(flag){
				if(flag){
					uni.showLoading()
				}else{
					this.loading=1
				}
				let json = await API.promotionList({
					limit:10,
					page:flag?0:this.page,
					enable: 1
				});
				if(json.status==200){
					if(flag){
						this.list=json.data
						this.page=0
						uni.stopPullDownRefresh()
						uni.hideLoading()
					}else{
						this.page++
						this.list=this.list.concat(json.data)
					}
					if(json.data.length<10){
						this.loading=-1
					}else{
						this.loading=0
					}
				}else{
					if(flag){
						uni.showModal({
							title: '提示',
							content: '刷新失败，请重试',
							showCancel: false,
						});
						uni.stopPullDownRefresh()
						uni.hideLoading()
					}else{
						uni.showModal({
							title: '提示',
							content: '加载失败，请重试',
							showCancel: false,
						});
						this.loading=-2
					}
				}
			},
		}
	}
</script>
<style scoped>
	.content {

	}
	.title{
		color: rgba(0, 0, 0, 1);
		font-size: 44upx;
		padding:40upx 0 0 3%;
	}
	.img{
		margin-top: 40upx;
		width: 96% !important;
	}
	.load-but{
		width: 100%;
		border:0px solid white;
		background: white;
	}
	button:after {
		border-width: 0;
	}
</style>
